<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#all{
			width: 1200px;
			height: 50px;
			margin: 0 auto;
			margin-top: 300px;
		}
		#fa{
			margin-left: 500px;
		}
		#fa ul{
			position: relative;
			height: 50px;
			
		}
		#fa ul li,#box{
			color: white;
			width: 70px;
			height: 70px;
			text-align: center;
			line-height: 70px;
			border-radius: 50px 30px 50px 30px;
			list-style: none;
			position: absolute;
			left: 0;
			top: 0;
		}
		#fa ul li:nth-of-type(1){
			border:3px solid #FF4634;
		}
		#fa ul li:nth-of-type(2){
			border:3px solid #FAFD34;
		}
		#fa ul li:nth-of-type(3){
			border:3px solid #34FEEE;
		}
		#fa ul li:nth-of-type(4){
			border:3px solid #3B5BFE;
		}
		#fa ul li:nth-of-type(5){
			border:3px solid#763CFF;
		}
		#fa ul li:nth-of-type(6){
			border:3px solid #84CDFC;
		}
		#box{
			border:3px solid #81FF44;
			background:#81FF44;
			cursor: pointer;
		}
		#box:hover{
			transition:all 1s;
			transform: rotate(1080deg);
		}

	</style>
</head>
<body>
	<div id="all">
		<div id="fa">
			<ul>
				<li>地球</li>
				<li>火星</li>
				<li>木星</li>
				<li>金星</li>
				<li>土星</li>
				<li>水星</li>
				<div id="box">太阳</div>
			</ul>
		</div>
	</div>

	<script type="text/javascript">
		var run = function(){
			// 抓取所有的li
			var lis = document.getElementsByTagName('li');
			var box = document.getElementById('box');
			// li的个数
			var num = lis.length;
			//角度
			var D = 360/num;
			// 设置圆的半径
			var r = 200;
			// 控制散开,回收
			var c = 0;
			// 控制在运动的时候不能再次点击
			var a = 0;
			var timer = num +'000';
			box.onclick = function(){
				if(a == 1) return;
				setTimeout(function(){
					a = 0;
				},timer);
				a = 1;
				if(c == 0){
					for (var i = 0; i <num; i++) {
						// 计算弧度
						var Q = Math.PI/180*D*i;
						// 计算x,y的值
						var x = r*Math.sin(Q);
						var y = r*Math.cos(Q);
						lis[i].style.left = x + 'px';
						lis[i].style.top = y + 'px';
						// 延时动画  - --- 注意  空 一格
						lis[i].style.transition = "all 1s "+i+'s';
						lis[i].style.transform = 'rotateX(-360deg)';
						c = 1;
					}
				}else{
					for (var i = 0; i < num; i++) {
						lis[i].style.left = '0px';
						lis[i].style.top = '0px';
						// 延时动画
						lis[i].style.transition = 'all 1s '+i+'s';
						lis[i].style.transform = 'rotateY(180deg)';
						c = 0;
					};
				}
			}
		}
		run();

	</script>
</body>
</html>